<template>
    <div>
        <el-card class="box-card">
            <el-row slot="header" :gutter="20" flex="main:center cross:center">
                <el-col :span="3">
                    <el-button type="primary" @click="add">新增消费</el-button>
                </el-col>
                <el-col :span="12"
                    >时间
                    <el-date-picker type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="search" placeholder="输入姓名搜索" />
                </el-col>
                <el-col :span="3">
                    <el-button type="primary">下载报表</el-button>
                </el-col>
            </el-row>
            <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" border style="width: 100%">
                <el-table-column type="index" label="编号" width="90" align="center"> </el-table-column>
                <el-table-column prop="time" label="日期" width="322" align="center"> </el-table-column>
                <el-table-column prop="name" label="姓名" width="322" align="center"> </el-table-column>
                <el-table-column prop="money" label="广告消费" width="322" align="center"> </el-table-column>
                <el-table-column label="操作" width="90" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="edit(scope.$index, scope.rpw)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="del(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination align="right" background layout="prev, pager, next" :total="100"> </el-pagination>
        </el-card>
        <el-dialog :title="isAdd ? '新增消费' : '修改'" :visible.sync="dialogFormVisible" align="center" @close="close">
            <el-form :model="form" :rules="yz">
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-input v-model="form.time" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="广告消费" :label-width="formLabelWidth">
                    <el-input v-model="form.money" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" align="center">
                <el-button type="primary" @click="diaOk">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button @click="reset">重 置</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            search: "",
            editIndex: 0,
            form: {
                time: "",
                name: "",
                money: ""
            },
            dialogFormVisible: false,
            formLabelWidth: "100px"
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            var list = await this.$request.get("/ad");
            this.tableData = list;
        },
        add() {
            this.dialogFormVisible = true;
            this.isAdd = true;
        },
        edit(index) {
            this.dialogFormVisible = true;
            this.isAdd = false;
            this.form = { ...this.tableData[index] };
            this.editIndex = index;
        },
        async diaOk() {
            if (this.isAdd) {
                await this.$request.post("/ad", this.form);
                this.$notify({
                    title: "已新增",
                    type: "success",
                    duration: "1500"
                });
            } else {
                var editId = this.tableData[this.editIndex].id;
                await this.$request.put("/ad/" + editId, this.form);
                this.$notify({
                    title: "修改成功",
                    type: "success",
                    duration: "1500"
                });
            }
            this.dialogFormVisible = false;
            this.getList();
        },
        async del(index) {
            // var delId = this.tableData[index].id;
            // await this.$request.delete("/ad/" + delId);
            // await this.getList();
            this.$confirm("是否确认删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(async () => {
                    var delId = this.tableData[index].id;
                    await this.$request.delete("/ad/" + delId);
                    await this.getList();
                    this.$notify({
                        type: "success",
                        title: "删除成功!",
                        duration: "1500"
                    });
                })
                .catch(() => {
                    this.$notify({
                        type: "success",
                        title: "已取消删除",
                        duration: "1500"
                    });
                });
        },
        reset() {
            this.form = {};
        },
        close() {
            this.form = {};
        }
    }
};
</script>
<style></style>
